
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <base href="${pageContext.request.contextPath}/"/>
    <title>menu</title>
    <link rel="stylesheet" href="static/js/layui/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/layui/public.css" media="all">
    <style>
        .layui-btn:not(.layui-btn-lg ):not(.layui-btn-sm):not(.layui-btn-xs) {
            height: 34px;
            line-height: 34px;
            padding: 0 8px;
        }
    </style>
</head>
<body>

<div class="layuimini-container">
    <div class="layuimini-main">

<%--        <fieldset class="table-search-fieldset" style="width: 1396px">--%>
<%--            <legend>搜索信息</legend>--%>
<%--            <div style="margin: 10px 10px 10px 10px">--%>
<%--                <form class="layui-form layui-form-pane" action="">--%>
<%--                    <div class="layui-form-item">--%>
<%--                        <div class="layui-inline">--%>
<%--                            <label class="layui-form-label">角色名字</label>--%>
<%--                            <div class="layui-input-inline">--%>
<%--                                <input type="text" name="roleNmae" autocomplete="off" class="layui-input">--%>
<%--                            </div>--%>
<%--                        </div>--%>
<%--                        <div class="layui-inline">--%>
<%--                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit  lay-filter="data-search-btn" lay-event="search" id="search"><i class="layui-icon"></i> 搜 索</button>--%>
<%--                        </div>--%>
<%--                    </div>--%>
<%--                </form>--%>
<%--            </div>--%>
<%--        </fieldset>--%>

<%--        自动渲染--%>
        <table class="layui-table" lay-data="{
                    height:500,
                    url:'role/queryRole',
                    page:true,
                    toolbar:'#toolbarDemo',
                    limit:10,
                    limits:[10,20,50],
                     id:'munu-table'
                    }"
               lay-filter="munu-table">
            <thead>
            <tr>
                <th lay-data="{field:'roleId', width:60,fixed:'left',templet:'#serial',align:'center'}">序号</th>
                <th lay-data="{field:'roleName', width:80}">角色名</th>
                <th lay-data="{field:'roleStatus', width:100 , templet:'#setStatus',align:'center' }">状态</th>
                <th lay-data="{field:'createUser',align:'center', width:80 }">创建者</th>
                <th lay-data="{field:'createDate',align:'center' }">创建时间</th>
                <th lay-data="{field:'updateUser',align:'center' }">修改者</th>
                <th lay-data="{field:'updateDate',align:'center'}">修改时间</th>
                <th lay-data="{minWidth:150,toolbar:'#auth-state',align:'center',align:'center'}">操作列</th>
            </tr>
            </thead>
        </table>
    </div>
</div>
</div>

<%--自增序号--%>
<script type="text/html" id="serial">
    {{d.LAY_TABLE_INDEX+1}}
</script>

<!-- 操作列 -->
<script type="text/html" id="auth-state">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="setRights">设置权限</a>
</script>
<%--添加--%>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add"> <i class="layui-icon">&#xe654;</i>添加角色</button>
    </div>
</script>

<script type="text/html" id="setStatus">

                    <%--    按钮默认关--%>
    <input type="checkbox" name="close" id="{{d.roleId}}"

        {{#  if(d.roleStatus === 1){ }}
           checked=""
        {{#  } else { }}
        {{#  } }}

           lay-skin="switch" lay-text="正常|禁用"  lay-filter="switchTest">
</script>

<script src="static/js/layui/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="static/js/layui/js/lay-config.js?v=1.0.4" charset="utf-8"></script>
<script>
    layui.use(['table', 'treetable','laydate','form'], function () {
        var $ = layui.jquery;
        var table = layui.table;
        var form = layui.form;
        var laydate = layui.laydate;
        var treetable = layui.treetable;
        /**
         * toolbar监听事件 添加列
         */

        table.on('toolbar(munu-table)', function (obj) {
            if (obj.event === 'add') {  // 监听添加操作
                var index = layer.open({
                    title: '添加角色',
                    type: 2,
                    shade: 0.2,
                    maxmin: true,
                    shadeClose: true,
                    area: ['70%', '70%'],
                    content: 'role/toAddRole'
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            }
            /**
             * 删除
             */

            else if (obj.event === 'delete') {  // 监听删除操作
                var checkStatus = table.checkStatus('munu-table')
                    , data = checkStatus.data;
                let mIds = [];
                $.each(data,function(i,n){
                    mIds.push(n.menuId);
                });
                layer.confirm('确定要删除吗?',function (index) {
                    $.ajax({
                        type:'post',
                        url:'role/deleteBatch',
                        data:{"menuIds":mIds.join(",")},
                        datatype:"json",
                        success:function (json){
                            if (json.statusCode==200){
                                table.reload('munu-table',{
                                    page:{curr:1}
                                },'data');
                            }
                            // ...
                        }
                    });
                });
            }

        });

        table.on('tool(munu-table)', function (obj) {
            var dataTable = obj.data;//获得某一行的数据
            var layEvent = obj.event;
            if (obj.event === 'del') {
                var checkStatus = table.checkStatus('munu-table'), data = checkStatus.data;
                layer.confirm('确定要删除吗?',function (index) {
                    $.ajax({
                        type:'delete',
                        url:'role/deleteRole?roleId='+dataTable.roleId,
                        datatype:"json",
                        success:function (json){
                            if (json.statusCode==200){
                                //刷新页面
                                table.reload('munu-table',{
                                    page:{curr:1}
                                },'data');
                                layer.open({
                                    type:1,
                                    id:'layerDemo1',
                                    content:'<div style="padding: 20px 100px;">'+json.message+'</div>',
                                    btn:'关闭',
                                    btnAlign:'c',
                                    shade:0,
                                    yes:function () {
                                        layer.closeAll();
                                    }
                                })
                            }
                        }
                    });
                    layer.closeAll();
                });
            }

                if (obj.event === 'edit') {
                    var index = layer.open({
                        title: '编辑',
                        type: 2,
                        shade: 0.2,
                        maxmin:true,
                        shadeClose: true,
                        area: ['50%', '50%'],
                        content: 'role/toRole?roleId='+dataTable.roleId,
                    });
                    $(window).on("resize", function () {
                        layer.full(index);
                    });
                    return false;
                }

            if (obj.event==='setRights'){
                var dataTable = obj.data;//获得某一行的数据
                var layEvent = obj.event;

                console.log(dataTable);
                var index = layer.open({
                    title: '编辑*'+dataTable.roleName+'*角色',
                    type: 2,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: ['100%', '100%'],
                    content: 'role/toSetRights?roleId='+dataTable.roleId,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
                return false;

            }

        });

        //监听指定开关
        form.on('switch(switchTest)', function(data){

            var rState = this.checked ? '1' : '0';
            var rId = this.id;

            $.ajax({
                type:'post',
                url:'role/updateStatus',
                datatype:'json',
                data:{"roleId":rId,"roleStatus":rState},
                success:function (json) {
                        if (json.statusCode==200){
                            table.reload('munu-table',{
                                page:{curr:1}
                            },'data');
                            layer.open({
                                type:1,
                                id:'layerDemo1',
                                content:'<div style="padding: 20px 100px;">'+json.message+'</div>',
                                btn:'关闭',
                                btnAlign:'c',
                                shade:0,
                                yes:function () {
                                    layer.closeAll();
                                }
                            })
                        }
                }
            });

        });

        /**
         * 模糊搜索
         */

        $("#search").bind('click',function (data) {


        })

    });


</script>
</body>
</html>
